<!--
报名
-->
<template>
    <div class="like-box">
        <!--<div class="box" @click="comment()">评论</div>-->
        <div class="box2">
            <z-good ref="selectfood" :good="good" v-if="good" @comment="comment"></z-good>
        </div>
        <div class="box" @click="comment()">
            <i class="iconfont icon-pinglun"></i>
            <span class="red">{{total}}</span>
        </div>
        <div class="box" @click="like()">
            <!--<i v-if="islike">
                <svg class="icon" aria-hidden="true">
                　　<use xlink:href="#icon-zan2"></use>
            　　</svg>
            </i>-->
            <i class="iconfont icon-zancopy active" v-if="islike"></i>
            <i class="iconfont icon-zan1" v-else></i>
        </div>
        <div class="box" @click="collect()">
            <!--<i v-if="iscollect">
                <svg class="icon" aria-hidden="true">
                　　<use xlink:href="#icon-shoucang1"></use>
            　　</svg>
            </i>-->
            <i class="iconfont icon-shoucangcopy active" v-if="iscollect"></i>
            <i class="iconfont icon-shoucang" v-else></i>
        </div>
        <comment :good="good" v-show="showComment" v-if="good" ref="comment" @comment="comment"></comment>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {homeService} from '../../service/homeService'
    import {commonService} from '../../service/commonService'
    import zgood from '../../component/detail/good.vue'
    import comment from '../detail/comment'
    export default {
        props: ['article'],
        components:{'z-good':zgood,comment:comment},
        data(){
            return{
                status:1,flag:false,
                artId: null,
                islike:false,
                iscollect:false,showComment:false,
                good:null,total:''
            }
        },
        mounted() {
            let that = this
            // console.log(that.article);
            that.flag = appService.checkLogin()
            if(that.flag){
                homeService.getcollect({typeId:that.article,type:0}).then(function(res){
                    that.islike = res.data.datas
                })
                homeService.getcollect({typeId:that.article,type:1}).then(function(res){
                    that.iscollect = res.data.datas
                })
                commonService.myCenter().then(function(res){
                    that.$store.state.userInfo.nickname = res.data.datas.user.nickName
                    console.log(that.$store.state.userInfo.nickname);
                })

            }
            that.good = {
                id:that.article,type:1
            }
        },
        methods: {
            go(){
                let that = this;
                commonService.showLoginModal(that)
                setTimeout(function(){
                    that.$router.push({name:'login'})
                },500)
            },
            comment(v){
                let that = this;
                // if(that.flag){
                document.getElementById('shouldfix').style.overflow='hidden'
                document.getElementById('shouldfix').style.height='100%'
                    that.showComment = true;
                    if(v){
                        that.$refs.comment.page.num=1
                        that.$refs.comment.upCallback()
                    }
                // }else{
                //     that.go()
                // }
            },
            collect(){
                let that = this;
                if(that.flag){
                    let type = that.iscollect ? 0 : 1
                    homeService.collect({articleId:that.article,type:type}).then(function(res){
                        that.iscollect = !that.iscollect
                    })
                }else{
                    that.go()
                }
            },
            like:function() {
                let that = this;
                if(that.flag){
                    let type = that.islike ? 0 : 1
                    homeService.like({articleId:that.article,type:type}).then(function(res){
                        that.islike = !that.islike
                    })
                }else{
                    that.go()
                }
            },
        },
    }
</script>

<style lang="less">

    .like-box {
        bottom:  0px;
        position:  fixed;
        background:  #fff;
        width:  100%;
        display:  flex;
        height: 1.2rem;
        align-items: center;
        justify-content: center;
        z-index:99;
        font-size:16px;
        border-top: 1px solid rgba(221,221,221,0.50);
        .box {
            padding-right:20px;
            background: #fff;
            text-align:  center;
            .iconfont{
                font-size:22px;
            }
            .active{
                color:#20A0FF;
            }
            .icon{
                height:22px;width:22px
            }
            .red {
                position: absolute;
                top: 8px;
                color: #fff;
                background: #FF3831;
                border-radius: 25px;
                font-size: 8px;
                padding: 1px 4px;
            }
        }
        .box2 {
            flex: 100;
            color:#fff;
            text-align:  center;
            .good{
                width:auto!important;
                z-index:auto!important;
            }
        }
    }


</style>